<template>
<div>
  <el-container>
    <el-header>
      <main-header></main-header>
    </el-header>

    <el-main>
      <div class="selected-bg-color main-body" style="padding: auto">

        <div class="blank-area"></div>

        <el-form ref="form" :model="form">
          <div style="text-align: center; font-size: x-large;">登录</div>
          <br>
          <div class="center">
            <el-input v-model="form.userId" size="medium" placeholder="请输入账号"></el-input>
          </div>
          <br>
          <div class="center">
            <el-input type="password" v-model="form.password" size="medium" placeholder="密码"></el-input>
          </div>
          <br>
          <div style="text-align: center">
            <el-button size="medium" v-on:click="onSubmit">登录</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#">忘记密码</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="#">注册账号</a>
          </div>
          <br>
          <div style="text-align: center">
          </div>
        </el-form>

        <div class="blank-area"></div>

      </div>
    </el-main>

    <el-footer>
      <main-footer></main-footer>
    </el-footer>
  </el-container>
</div>
</template>

<script>
import MainHeader from '@/components/NavMenu.vue'
import MainFooter from '@/components/MainFooter.vue'
import request from '@/utils/request';

export default {
  data() {
    return {
      form: {
        userId: '',
        password: ''
      },
      info: ''
    }
  },
  methods: {
    onSubmit: function () {
      const params = new URLSearchParams();
      params.append('userId', this.form.userId);
      params.append('password', this.form.password);
      request
        .post("/login", params)
        .then(response => {
          let data = response.data.data;
          this.saveLoginData(data);
          /* eslint-disable no-console */
          console.log(response.data);
          window.confirm("登录成功");
          this.$router.push({
            path: "/"
          });
        }).catch(error => {
          /* eslint-disable no-console */
          console.log(error);
          window.alert("登录失败");
        });
    },
    saveLoginData(data) {
      console.log("SaveLoginData: " + data);
      this.$store.commit({
        type: 'account/setToken',
        val: data
      })
    }
  },
  components: {
    "main-header": MainHeader,
    "main-footer": MainFooter
  }
};
</script>

<style>
.center {
  width: 300px;
  margin: 0 auto;
}

.selected-bg-color {
  background-color: #f4f8f2;
}

.main-body {
  height: 80%;
}

.blank-area {
  height: 120px;
}
</style>
